<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>009：slideDown()不一定向下，slideUp不一定向上</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			.box {
				width: 512px;
				height: 512px;
				margin: 0 auto;
				border: 1px solid #000;
				background-image: url(../img/a01.jpg);
				position: relative;
			}
			p {
				position: absolute;
				line-height: 30px;
				color: #fff;
				background-color: rgba(0,0,0,.5);
				left: 0;
				bottom: 0;
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字说明文字</p>
		</div>
		
		
		<!--引入jquery包-->
		<script type="text/javascript" src="../js/jquery-3.4.1.js"></script>
		<script type="text/javascript">
			//添加鼠标移入事件
			$(".box").mouseenter(function() {
				$("p").slideDown(1000);
			})
			
			//添加鼠标离开事件
			$(".box").mouseleave(function() {
				$("p").slideUp(1000);
			})
			
		</script>
	</body>
</html>
